<template>
	<view class="exprotMnemonics">
		<HeaderBar title="备份助记词" showBack fixed />
		<view class="contentBox">
			<!-- <view class="navTab">
				<view class="navLeft" :class="{'active':active==1}" @tap="tabNav(1)">
					手抄备份
				</view>
				<view class="navRight" :class="{'active':active==2}" @tap="tabNav(2)">
					KeyPal Card备份
				</view>
			</view> -->
			<view class="navCar1">
				<view class="navTilp">
					助记词用于恢复钱包及重置钱包密码，请准确无误抄 写助记词，并存放在安全的地方
				</view>
				<view class="mnemoic_box">
					<view class="mnemoicTiele_box">
						<view class="m_left">
							明文助记词(12个单词）
						</view>
						<view class="m_right" @click="tabClick">
							<view class="look_icon">
								<image src="../../static/images/login/look.png" mode="widthFix" class="icon"></image>
							</view>
							<view class="r-text">
								<text v-if="tabIndex">显示二维码</text>
								<text v-else>显示助记词</text>
							</view>
						</view>
					</view>
					<view class="tt">
						<view class="test" :style="{ zIndex: tabIndex?20:1 }">
							<view class="mnemoic_content">
								<view class="Mask" v-show="isShow" @tap="look">
									<view class="carmera_box">
										<view class="carmera">
											<image src="../../static/images/login/camera.png" mode="widthFix"
												class="icon">
											</image>
										</view>
										<view class="c_text">

											请确认周围无人及摄像头
										</view>
									</view>
								</view>
								<view class="mnemoic" @tap="look">
									<view class="items" v-for="(item,index) in mnemonics">
										<!-- <text class="index">{{index+1}}</text> -->
										<text>{{item}}</text>
									</view>
								</view>
							</view>
							<!-- <view class="copy_btn">
								<text @tap="copy">复制助记词</text>
							</view> -->
						</view>
						<view class="code_box" @click="look">
							<view class="Mask" v-if="isShow">
								<view class="carmera_box">
									<view class="carmera">
										<image src="../../static/images/login/camera.png" mode="widthFix" class="icon">
										</image>
									</view>
									<view class="c_text">
										请确认周围无人及摄像头
									</view>
								</view>
							</view>
							<QRCode v-if="qrText" :value="qrText" :size="300" backgroundColor="#FFF"
								foregroundColor="#000" />
						</view>
					</view>
					<view class="remember-box">
						<view class="title">
							切记：
						</view>
						<view class="list">
							<view class="item">
								<text class="dot"></text>
								<view class="text">
									请勿将助记词透露给任何人
								</view>
							</view>
							<view class="item">
								<text class="dot"></text>
								<view class="text">
									助记词一旦丢失，资产将无法恢复
								</view>
							</view>
							<view class="item">
								<text class="dot"></text>
								<view class="text">
									请勿通过截屏、网络传输的方式进行备份保存
								</view>
							</view>
							<view class="item">
								<text class="dot"></text>
								<view class="text">
									遇到任何情况，请不要轻易卸载钱包APP
								</view>
							</view>
						</view>
					</view>

					<view class="btn">
						<view class="" @tap="copy">
							复制助记词
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				isShow: true,
				tabIndex: true,
				config: {},
				account: {}
			};
		},
		computed: {
			choinInfo() {
				return this.$store.getters.choinInfo
			},
			addressInfo() {
				return this.$store.getters.addressInfo
			},
			mnemonics() {
				if (this.addressInfo) {
					const mnemonics = this.addressInfo.mnemonics.split(',')
					return mnemonics
				}
				return []
			},
			qrText() {
				if (this.addressInfo) {
					const mnemonics = this.addressInfo.mnemonics
					return mnemonics.replace(/,/g, ' ')
				}
				return ''
			}
		},
		methods: {
			tabClick() {
				this.tabIndex = !this.tabIndex
			},
			tabNav(num) {
				this.active = num;
			},
			look() {
				this.isShow = !this.isShow
			},
			copy() {
				uni.setClipboardData({
					data: this.qrText,
					success: function() {
						uni.showToast({
							title: '复制成功',
							position: "bottom",
							icon: "none",
							duration: 2000
						});
					}
				});
			},
		}
	}
</script>


<style lang="scss" scoped>
	.exprotMnemonics {

		.contentBox {
			margin-top: 40upx;
			padding: 0 40upx;

			.navTab {
				background: #E9EAEC;
				padding: 8upx 22upx;
				text-align: center;
				display: flex;
				font-size: 26upx;
				border-radius: 20upx;

				.navLeft {
					flex: 1;
					line-height: 72upx;
				}

				.navRight {
					flex: 1;
					line-height: 72upx;
				}

				.active {
					background: #FFF;
					border-radius: 20upx;
				}
			}

			.navCar1 {
				padding: 0 20upx 100upx;

				.navTilp {
					margin-top: 16upx;
					font-size: 26upx;
					color: #9F9F9F;
					font-weight: 400;
				}

				.tt {
					position: relative;
					width: 100%;
					height: 432upx;
				}

				.mnemoic_box {
					margin-top: 74upx;

					.mnemoicTiele_box {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.m_left {
							font-size: 26upx;
							color: #3D3D3D;
							font-weight: 400;
						}

						.m_right {
							display: flex;
							align-items: center;

							.look_icon {
								display: flex;
								margin-right: 10upx;

								.icon {
									width: 24upx;
									height: 26upx;
								}
							}
						}
					}

					.test {
						width: 100%;
						position: absolute;
						z-index: 2;
						background: #FFF;
					}

					.mnemoic_content {
						// margin-top: 40upx;
						width: 100%;
						height: 432upx;
						padding: 20upx 16upx;
						background: #F5F7F6;
						border-radius: 20upx;
						position: relative;
						box-sizing: border-box;

						.Mask {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
							background-color: #F5F7F6;
							// backdrop-filter: blur(10px);
							// -webkit-backdrop-filter: blur(10px);
							border-radius: 20upx;

							/* 可选的边框 */
							.carmera_box {
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;

								.carmera {
									display: flex;
									width: 94upx;
									height: 94upx;
									background: #FFEDED;
									border-radius: 47upx;
									justify-content: center;
									align-items: center;
									margin-bottom: 8upx;

									.icon {
										width: 48upx;
										height: 48upx;
									}
								}

								.c_text {
									font-size: 26upx;
									color: #3D3D3D;
								}
							}
						}

						.mnemoic {
							display: grid;
							grid-template-columns: repeat(3, 1fr);
							grid-template-rows: repeat(4, 1fr);
							gap: 16upx;
							height: 392upx;

							.items {
								background: #FFFFFF;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 28upx;
								color: #3D3D3D;
								font-weight: 400;
								border-radius: 20upx;

								.index {
									margin-right: 10upx;
									color: #999999;
								}
							}
						}
					}

					.copy_btn {
						text-align: center;
						color: #368521;
						font-weight: 400;
						font-size: 28upx;
						margin-top: 54upx;
						line-height: 46upx;
					}

					.code_box {
						margin-top: 40upx;
						width: 100%;
						height: 432upx;
						background-color: #F5F7F6;
						border-radius: 20upx;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						z-index: 10;

						.Mask {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
							background-color: #F5F7F6;
							z-index: 999;
							border-radius: 20upx;

							/* 可选的边框 */
							.carmera_box {
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;

								.carmera {
									display: flex;
									width: 94upx;
									height: 94upx;
									background: #FFEDED;
									border-radius: 47upx;
									justify-content: center;
									align-items: center;
									margin-bottom: 8upx;

									.icon {
										width: 48upx;
										height: 48upx;
									}
								}

								.c_text {
									font-size: 26upx;
									color: #3D3D3D;
								}
							}
						}
					}


					.remember-box {
						background-color: #FFEDED;
						padding: 20upx 48upx;
						border-radius: 20upx;
						color: #DF6556;
						font-size: 24upx;
						font-weight: 500;
						margin-top: 52upx;

						.title {}

						.list {
							margin-top: 14upx;

							.item {
								display: flex;
								margin-bottom: 6upx;
								align-items: center;

								.dot {
									width: 20upx;
									height: 20upx;
									background-color: #DF6556;
									border-radius: 10upx;
									margin: 0 8upx;
								}
							}
						}
					}

					.btn {
						font-size: 26upx;
						color: #F6F6F6;
						line-height: 88upx;
						background: linear-gradient(180deg, #A9E993 0%, #368321 100%);
						border-radius: 10upx;
						text-align: center;
						margin-top: 100upx;
						margin-bottom: 100upx;
					}
				}
			}

		}
	}
</style>